<template>
    <div class="form-wrapper">
        <div class="card">
            <el-tag size="mini" class="dark-tag" :color="this.dataToForm.info.borderColor">
                关系
            </el-tag>
            <span>{{this.$root.graph.links[this.dataToForm.info.dataIndex].value}}</span>
            <div class="relation-block">
                <el-tag size="mini" class="dark-tag" :color="this.dataToForm.info.borderColor">
                    {{""+this.$root.graph.nodes[this.$root.graph.links[this.dataToForm.info.dataIndex].source].name}}
                </el-tag>
                <i class="el-icon-arrow-right"></i>
                <el-tag size="mini" class="dark-tag" :color="this.dataToForm.info.borderColor">
                    {{this.$root.graph.nodes[this.$root.graph.links[this.dataToForm.info.dataIndex].target].name}}
                </el-tag>
            </div>
        </div>
        <el-divider class="divider-style"><i class="el-icon-edit"></i></el-divider>
        <el-collapse class="form" accordion>
            <el-collapse-item title="编辑关系">
                <el-form>
                    <el-form-item>
                        <el-select class="form-item-style" placeholder="修改关系类型" v-model="linkStyle">
                            <el-option v-for="item in optionsLink"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="form-item-style" type="primary" @click="modifyLink">
                            编辑<i class="el-icon-eleme"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="删除关系">
                <el-button class="form-item-style" type="danger" @click="deleteLink">
                    删除关系<i class="el-icon-delete"></i>
                </el-button>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    export default {
        name: "edgeForm",
        data() {
            return {
                relationName: "",
                optionsLink: [
                    {
                        value: 0,
                        label: "办理",
                    },
                    {
                        value: 1,
                        label: "默认",
                    },
                    {
                        value: 2,
                        label: "规则标签",
                    },
                    {
                        value: 3,
                        label: "获得(状态更新)",
                    },
                    {
                        value: 4,
                        label: "提交",
                    },
                    {
                        value: 5,
                        label: "履行",
                    },
                    {
                        value: 6,
                        label: "生成",
                    },
                    {
                        value: 7,
                        label: "公证",
                    }
                ],
                linkStyles: [
                    {
                        lineStyle: {
                            "type": "dotted",
                        },
                        symbol: ["pin", "arrow"]
                    },
                    {
                        lineStyle: {
                            "type": "dotted",
                        },
                        symbol: ["none", "none"]
                    },
                    {
                        lineStyle: {
                            "type": "solid",
                        },
                        symbol: ["pin", "arrow"]
                    },
                    {
                        lineStyle: {
                            "type": "dashed",
                        },
                        symbol: ["pin", "diamond"]
                    },
                    {
                        lineStyle: {
                            "type": "solid",
                        },
                        symbol: ["pin", "arrow"]
                    },
                    {
                        lineStyle: {
                            "type": "solid",
                        },
                        symbol: ["pin", "triangle"]
                    },
                    {
                        lineStyle: {
                            "type": "solid",
                        },
                        symbol: ["pin", "Rect"]
                    },
                    {
                        lineStyle: {
                            "type": "dotted",
                        },
                        symbol: ["pin", "roundRect"]
                    },
                    {
                        lineStyle: {
                            "type": "dashed",
                        },
                        symbol: ["pin", "circle"]
                    },
                ],
                linkStyle: "",
            };
        },
        props: {
            dataToForm: {
                type: Object
            },
            updateMyCharts: {
                type: Function,
                default: null
            },
            closeDrawer: {
                type: Function,
                default: null
            }
        },
        methods: {
            modifyLink() {
                let link = this.$root.graph.links[this.dataToForm.info.dataIndex];
                if (this.linkStyle === 1) {
                    link.value = "";
                } else {
                    link.value = this.optionsLink[this.linkStyle].label;
                }
                link.lineStyle = this.linkStyles[this.linkStyle].lineStyle;
                link.symbol = this.linkStyles[this.linkStyle].symbol;
                this.$root.graph.links[this.dataToForm.info.dataIndex] = link;
                this.updateMyCharts();
                this.linkStyle = "";
            },
            deleteLink() {
                this.$root.graph.links.splice([this.dataToForm.info.dataIndex], 1);
                this.updateMyCharts();
                this.closeDrawer();
                this.linkStyle = "";
            }

        }
    };
</script>

<style scoped>
    @import "../../assets/styles/formStyle.css";
</style>